﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.5" charset="utf-8"/>
<title>在线投保</title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<link href="../css/common.css" rel="stylesheet" type="text/css" />
<link href="../css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
    
<!--标题区域 start-->
<div class="tit_main">
  在线投保
  <a href="" class="pull-left"><span class="icon icon-left"></span>返回</a>
  <span class="icon icon-ang pull-right" onClick="showDiv('agn-menu')"></span>
</div>
<!--标题区域 end-->

<ul class="step-panel">                                 
  <li class="active"><i>1</i>投保产品</li>
  <li><i>2</i>客户信息</li>
  <li><i>3</i>其他投保选项</li>
  <li><i>4</i>告知及问卷</li>
  <li><i>5</i>投保资料阅读</li>
  <li><i>6</i>投保确认</li>
  <li><i>7</i>签字</li>
  <li><i>8</i>拍照</li>
  <li><i>9</i>支付</li>
</ul>
<!--内容区域 start-->
<div class="H_step" id="wrapper">
  <div>   
    <div class="blank-1"></div>
    <div class="col-md-12">
      <div class="form-group">
        <div class="control-label col-md-1">投保人</div>
        <label class="control-label col-md-1">年龄</label>
        <div class="col-md-1">
          <input type="text" class="form-control" />
        </div>
        <label class="control-label col-md-1">性别</label>
        <div class="col-md-2 radio-sex">
          <label class="male active">
            <input type="radio" name="x" value="option1" />
          </label>
          <label class="female">
            <input type="radio" name="x" value="option1" />
          </label>
        </div>
        <label class="control-label col-md-1">职业</label>
        <div class="col-md-5">
          <div id="treelist">
            <!-- <option>请选择</option> -->
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="control-label col-md-1">被保险人</div>
        <label class="control-label col-md-1">年龄</label>
        <div class="col-md-1">
          <input type="text" class="form-control" />
        </div>
        <label class="control-label col-md-1">性别</label>
        <div class="col-md-2 radio-sex">
          <label class="male active">
            <input type="radio" name="inlineRadioOptions" value="option1" />
          </label>
          <label class="female">
            <input type="radio" name="inlineRadioOptions" value="option1" />
          </label>
        </div>
        <label class="control-label col-md-1">职业</label>
        <div class="col-md-5">
          <select class="form-control">
            <option>请选择</option>
          </select>
        </div>
      </div>
    </div>
    <div class="blank-1"></div>
    <!-- 主险 -->
    <h3 class="title">爱健康-乐享人生-女士
      <a class="pull-right" href="">
        <span class="icon icon-add">+</span>
        <label class="blue">添加附加险</label>
      </a> 
    </h3>
    <div class="blank-10"></div>
    <table width="100%">
      <tr>
        <td width="180" align="center">
          交费方式
          <select class="form-control sm">
            <option>年交</option>
          </select>
        </td>
        <td>
          保费<span class="orange">￥327,436.40</span>
        </td>
        <td>
          年金领取方式
          <select class="form-control sm">
            <option>年领</option>
          </select>
        </td>
        <td>
          起始年金领取年龄
          <select class="form-control sm">
            <option>55</option>
          </select>
        </td>
        <td>
          年交领取年限
          <select class="form-control sm">
            <option>10</option>
          </select>
        </td>
      </tr>
    </table>
    <div class="blank-10"></div>
    <table class="table table-lg">
      <tr>       
        <td>代码</td>
        <td width="235" align="center">保额</td>
        <td width="235" align="center">保费</td>
        <td width="130" align="center">缴费期限</td>
        <td width="130" align="center">缴费频率</td>
        <td width="160" align="center">操作</td>
      </tr>
      <tr>       
        <td><span class="lh-45">Y9999</span></td>
        <td align="center">
          <div class="number-chose">
            <button class="btn btn-minus"></button>
            <input class="form-control" type="text" name="" value="5000" />
            <button class="btn btn-plus"></button>
          </div>
        </td>
        <td align="center">
          <div class="number-chose">
            <button class="btn btn-minus"></button>
            <input class="form-control" type="text" name="" value="5000" />
            <button class="btn btn-plus"></button>
          </div>
        </td>
        <td align="center">
          <input type="number" class="form-control" value="18" />
        </td>
        <td align="center">
          <input type="text" class="form-control" value="年交" />
        </td>
        <td align="center">
          <button class="btn-icon"><span class="icon icon-chart"></span></button>
          <button class="btn-icon"><span class="icon icon-remove"></span></button>
        </td>
      </tr>
    </table>
    <!-- 附加险 -->
    <div class="padding-left-15">
      <table class="table table-lg no-border-top no-border">
        <tr>
          <td colspan="6">爱健康附加附加附加附加---1</td>
        </tr>
        <tr>       
          <td><span class="lh-45">Y9999</span></td>
          <td width="235" align="center">
            <div class="number-chose">
              <button class="btn btn-minus"></button>
              <input class="form-control" type="text" name="" value="5000" />
              <button class="btn btn-plus"></button>
            </div>
          </td>
          <td width="235" align="center">
            <div class="number-chose">
              <button class="btn btn-minus"></button>
              <input class="form-control" type="text" name="" value="5000" />
              <button class="btn btn-plus"></button>
            </div>
          </td>
          <td width="130" align="center">
            <input type="number" class="form-control" value="18" />
          </td>
          <td width="130" align="center">
            <input type="text" class="form-control" value="年交" />
          </td>
          <td width="160" align="center">
            <button class="btn-icon"><span class="icon icon-chart"></span></button>
            <button class="btn-icon"><span class="icon icon-remove"></span></button>
          </td>
        </tr>
      </table>
    </div>
    <div class="padding-left-15">
      <table class="table table-lg no-border">
        <tr>
          <td colspan="6">爱健康附加附加附加附加---2</td>
        </tr>
        <tr>       
          <td><span class="lh-45">Y9999</span></td>
          <td width="235" align="center">
            <div class="number-chose">
              <button class="btn btn-minus"></button>
              <input class="form-control" type="text" name="" value="5000" />
              <button class="btn btn-plus"></button>
            </div>
          </td>
          <td width="235" align="center">
            <div class="number-chose">
              <button class="btn btn-minus"></button>
              <input class="form-control" type="text" name="" value="5000" />
              <button class="btn btn-plus"></button>
            </div>
          </td>
          <td width="130" align="center">
            <input type="number" class="form-control" value="18" />
          </td>
          <td width="130" align="center">
            <input type="text" class="form-control" value="年交" />
          </td>
          <td width="160" align="center">
            <button class="btn-icon"><span class="icon icon-chart"></span></button>
            <button class="btn-icon"><span class="icon icon-remove"></span></button>
          </td>
        </tr>
      </table>
    </div>
    <!-- 主险 -->
    <h3 class="title">申根之王-欧洲旅行保险计划
      <a class="pull-right" href="">
        <span class="icon icon-add">+</span>
        <label class="blue">添加附加险</label>
      </a> 
    </h3>
    <div class="blank-10"></div>
    <table width="100%">
      <tr>
        <td width="180" align="center">
          交费方式
          <select class="form-control sm">
            <option>年交</option>
          </select>
        </td>
        <td>
          保费<span class="orange">￥327,436.40</span>
        </td>
        <td>
          年金领取方式
          <select class="form-control sm">
            <option>年领</option>
          </select>
        </td>
        <td>
          起始年金领取年龄
          <select class="form-control sm">
            <option>55</option>
          </select>
        </td>
        <td>
          年交领取年限
          <select class="form-control sm">
            <option>10</option>
          </select>
        </td>
      </tr>
    </table>
    <div class="blank-10"></div>
    <table class="table table-lg no-border-top">
      <tr>       
        <td>代码</td>
        <td width="235" align="center">保额</td>
        <td width="235" align="center">保费</td>
        <td width="130" align="center">缴费期限</td>
        <td width="130" align="center">缴费频率</td>
        <td width="160" align="center">操作</td>
      </tr>
      <tr>       
        <td><span class="lh-45">Y9999</span></td>
        <td align="center">
          <div class="number-chose">
            <button class="btn btn-minus"></button>
            <input class="form-control" type="text" name="" value="5000" />
            <button class="btn btn-plus"></button>
          </div>
        </td>
        <td align="center">
          <div class="number-chose">
            <button class="btn btn-minus"></button>
            <input class="form-control" type="text" name="" value="5000" />
            <button class="btn btn-plus"></button>
          </div>
        </td>
        <td align="center">
          <input type="number" class="form-control" value="18" />
        </td>
        <td align="center">
          <input type="text" class="form-control" value="年交" />
        </td>
        <td align="center">
          <button class="btn-icon"><span class="icon icon-chart"></span></button>
          <button class="btn-icon"><span class="icon icon-remove"></span></button>
        </td>
      </tr>
    </table>
  </div> 
</div>
<!--内容区域 end-->

<!--底部区域 start-->
<div class="bot_main">
  <div class="col-md-2">
    <button class="btn btn-primary btn-lg btn-block"><span class="icon icon-edit"></span>修改主险</button>
  </div>
  <div class="col-md-8 text-right orange">
    合计保费：<span class="font-30 orange">3656.00</span>元
  </div>
  <div class="col-md-2">
    <a class="btn btn-warning btn-lg btn-block" href="11-1.html"><span class="icon icon-right-circle"></span>下一步</a>
  </div>
</div>
<!--底部区域 end-->

<div id="agn-menu" class="hide">
  <nav class="circle-bird">
    <lable class="circle-text"></lable>
    <div class="circle-menu">
      <a href="#" class="menu-item" id="menu-one"> 
        <i class="">订单查询</i> 
      </a>
      <a href="#" class="menu-item" id="menu-two"> 
        <i class="">在线投保</i>
      </a>
      <a href="#" class="menu-item" id="menu-three"> 
        <i class="">公司介绍</i> 
      </a>
      <a href="#" class="menu-item" id="menu-four"> 
        <i class="">产品中心</i> 
      </a>
      <a href="#" class="menu-item" id="menu-five"> 
        <i class="">建议书</i> 
      </a>
    </div>
    <span class="close circle-close" onClick="closeDiv('agn-menu')">X</span>
  </nav>
</div>
<!--js全放底部-->
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../js/iscroll.js" type="text/javascript"></script>
<script src="../js/jquery.jmpopups-0.5.1.js" type="text/javascript"></script>

<script src="../js/mobiscroll.custom-2.6.2.min.js" type="text/javascript"></script>
<script src="../js/jobchooes.js" type="text/javascript"></script>
<script src="../js/common.js" type="text/javascript"></script>
<script type="text/javascript">
</script>

</body>
</html>
